<template>
  <section
    v-loading="loading"
    class="iframe-container"
  >
    <iframe
      ref="iframeRef"
      :src="iframeSrc"
      class="iframe-container__iframe"
    />
  </section>
</template>
<script lang="ts" setup name="Iframe">
import {
  ref, unref, onMounted, nextTick,
} from 'vue';

import { useRoute } from 'vue-router';

const route = useRoute();
const loading = ref(false);
const iframeRef = ref();
const iframeSrc = ref<string>('');

if (unref(route.meta)?.iframeSrc) {
  iframeSrc.value = unref(route.meta)?.iframeSrc as string;
}

function init() {
  loading.value = true;
  nextTick(() => {
    const iframe = unref(iframeRef);
    if (!iframe) {
      return;
    }
    const _frame:any = iframe;
    if (_frame.attachEvent) {
      _frame.attachEvent('onload', () => {
        loading.value = false;
      });
    } else {
      iframe.onload = () => {
        loading.value = false;
      };
    }
  });
}

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
  .iframe-container {
    width: 100%;
    height: 100%;

    .iframe-container__iframe {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 0;
    }
  }
</style>
